<template>
  <div id="main">
    <table id="timu" cellpadding="0" cellspacing="0"></table>
  </div>
</template>

<script>
export default {
  mounted() {
    this.createTitle();
  },
  data() {
    return {
      counts:[]
    };
  },
  methods: {
    computedRes() {
      this.countDwon = 1;
      this.isOpend = 4;
      this.isEnd = !this.isEnd;
    },
    getRes() {
      this.isOpend = 4;
    },
    getOpen(val) {
      this.isOpend = val;
    },
    getOpenOnce(val) {
      this.isOpend = val;
      this.countDwon = 10;
    },
    createTitle() {
      const whichConputedMethod = this.$store.state.whichConputedMethod + "";
      var newTr = []; //新的tr
      var newTd = []; //新的td
      for (var i = 0; i < 8; i++) {
        newTr[i] = document.createElement("tr");
        for (var j = 0; j < 1; j++) {
          newTd[j] = document.createElement("td");
          newTd[j].className = "tdStyle";
          var randomSinger1 = Math.floor(Math.random() * 100);
          var randomSinger2 = Math.floor(Math.random() * 100);
          switch (whichConputedMethod) {
            case "1": // 5以内的加减法
              var randomSinger1 = Math.floor(Math.random() * 5 + 1);
              var randomSinger2 = Math.floor(Math.random() * 5 + 1);
              var operation = Math.random() < 0.5 ? "+" : "-";
              if (operation === "+") {
                newTd[
                  j
                ].innerHTML = `${randomSinger1}+${randomSinger2}=<input type='text' value='' maxLength='2'>`;
              } else {
                newTd[j].innerHTML = `${Math.max(
                  randomSinger1,
                  randomSinger2
                )}-${Math.min(
                  randomSinger1,
                  randomSinger2
                )}=<input type='text' value='' maxLength='2'>`;
              }
              var res = eval(newTd[j].innerText.slice(0, -1));
              break;
            case "2": // 10以内的加减法
              var randomSinger1 = Math.floor(Math.random() * 10 + 1);
              var randomSinger2 = Math.floor(Math.random() * 10 + 1);
              var operation = Math.random() < 0.5 ? "+" : "-";
              if (operation === "+") {
                newTd[
                  j
                ].innerHTML = `${randomSinger1}+${randomSinger2}=<input type='text' value='' maxLength='2'>`;
              } else {
                newTd[j].innerHTML = `${Math.max(
                  randomSinger1,
                  randomSinger2
                )}-${Math.min(
                  randomSinger1,
                  randomSinger2
                )}=<input type='text' value='' maxLength='2'>`;
              }
              var res = eval(newTd[j].innerText.slice(0, -1));
              break;
            case "3": // 20以内的加减法
              var randomSinger1 = Math.floor(Math.random() * 20 + 1);
              var randomSinger2 = Math.floor(Math.random() * 20 + 1);
              var operation = Math.random() < 0.5 ? "+" : "-";
              if (operation === "+") {
                newTd[
                  j
                ].innerHTML = `${randomSinger1}+${randomSinger2}=<input type='text' value='' maxLength='2'>`;
              } else {
                newTd[j].innerHTML = `${Math.max(
                  randomSinger1,
                  randomSinger2
                )}-${Math.min(
                  randomSinger1,
                  randomSinger2
                )}=<input type='text' value='' maxLength='2'>`;
              }
              var res = eval(newTd[j].innerText.slice(0, -1));
              break;
            case "4": // 100以内的加减法
              var randomSinger1 = Math.floor(Math.random() * 100 + 1);
              var randomSinger2 = Math.floor(Math.random() * 100 + 1);
              var operation = Math.random() < 0.5 ? "+" : "-";
              if (operation === "+") {
                newTd[
                  j
                ].innerHTML = `${randomSinger1}+${randomSinger2}=<input type='text' value='' maxLength='3'>`;
              } else {
                newTd[j].innerHTML = `${Math.max(
                  randomSinger1,
                  randomSinger2
                )}-${Math.min(
                  randomSinger1,
                  randomSinger2
                )}=<input type='text' value='' maxLength='3'>`;
              }
              var res = eval(newTd[j].innerText.slice(0, -1));
              break;

            case "5": // 表内乘法
              var divisor = Math.floor(Math.random() * 9) + 1;
              var quotient = Math.floor(Math.random() * 9) + 1;
              var dividend = divisor * quotient;
              newTd[j].innerHTML =
                dividend +
                " ÷ " +
                divisor +
                " = " +
                "<input type='text' value='' maxLength='3'>";
              var res = eval(newTd[j].innerText.replace("÷", "/").slice(0, -2));
              break;
            case "6": // 表内除法
              var factor1 = Math.floor(Math.random() * 9) + 1;
              var factor2 = Math.floor(Math.random() * 9) + 1;
              newTd[j].innerHTML =
                factor1 +
                " × " +
                factor2 +
                " = " +
                "<input type='text' value='' maxLength='3'>";
              var res = eval(newTd[j].innerText.replace("×", "*").slice(0, -2));
              break;
            case "7": //带余数的除法
              var dividend = Math.floor(Math.random() * 50 + 1); // 被除数
              var divisor = Math.floor(Math.random() * 10 + 1); // 除数
              var quotient = Math.floor(dividend / divisor); // 商
              var remainder = dividend % divisor; // 余数
              newTd[j].innerHTML =
                dividend +
                "÷" +
                divisor +
                "=" +
                "<input type='text' value='' maxLength='3'>" +
                "......" +
                remainder;
              var res = quotient;
              break;
            case "8": //万以内的加减法
              var randomNum1 = Math.floor(Math.random() * 10000 + 1); // 随机生成一个万以内的数
              var randomNum2 = Math.floor(Math.random() * 10000 + 1); // 随机生成一个万以内的数
              if (randomNum1 < randomNum2) {
                // 如果被减数小于减数，交换它们的值
                var temp = randomNum1;
                randomNum1 = randomNum2;
                randomNum2 = temp;
              }
              var operator = Math.floor(Math.random() * 2); // 随机生成加减符号，0代表加法，1代表减法
              var result =
                operator === 0
                  ? randomNum1 + randomNum2
                  : randomNum1 - randomNum2;
              newTd[j].innerHTML =
                randomNum1 +
                (operator === 0 ? "+" : "-") +
                randomNum2 +
                "=" +
                "<input type='text' value='' maxLength='5'>";
              var res = eval(newTd[j].innerText.slice(0, -1));
              break;
            case "9": //多位数乘一位数
              var randomNum1 = Math.floor(Math.random() * 1000 + 1); // 随机生成一个三位数以内的数
              var randomNum2 = Math.floor(Math.random() * 9 + 1); // 随机生成一个一位数
              var result = randomNum1 * randomNum2;
              newTd[j].innerHTML =
                randomNum1 +
                "×" +
                randomNum2 +
                "=" +
                "<input type='text' value='' maxLength='4'>";
              var res = randomNum1 * randomNum2;
              break;
            case "10": // 两位数乘两位数
              var randomSinger7 = Math.floor(Math.random() * 90 + 10);
              var randomSinger8 = Math.floor(Math.random() * 90 + 10);
              newTd[j].innerHTML =
                randomSinger7 +
                "x" +
                randomSinger8 +
                "=" +
                "<input type='text' value='' maxLength='4'>";
              var res = eval(newTd[j].innerText.replace("x", "*").slice(0, -1));
              break;
            case "11": // 除数为一位数的除法
              var randomSinger9 = Math.floor(Math.random() * 90 + 10);
              var randomSinger10 = Math.floor(Math.random() * 9 + 1);
              var product = randomSinger9 * randomSinger10;
              newTd[j].innerHTML =
                product +
                "÷" +
                randomSinger10 +
                "=" +
                "<input type='text' value='' maxLength='3'>";
              var res = eval(newTd[j].innerText.replace("÷", "/").slice(0, -1));
              break;
            case "12": //三位数乘两位数
              var randomSinger1 = Math.floor(Math.random() * 900 + 100); // 随机生成三位数
              var randomSinger2 = Math.floor(Math.random() * 90 + 10); // 随机生成两位数
              newTd[j].innerHTML =
                randomSinger1 +
                "x" +
                randomSinger2 +
                "=" +
                "<input type='text' value='' maxLength='5'>";
              var res = randomSinger1 * randomSinger2;
              break;
            case "13": // 小数加法
              var num1 = (Math.random() * 10).toFixed(1);
              var num2 = (Math.random() * 10).toFixed(1);
              newTd[j].innerHTML =
                num1 +
                " + " +
                num2 +
                " = " +
                "<input type='text' value='' maxLength='5'>";
              var res = num1 + num2;
              break;

            case "14": // 小数减法
              var num1 = (Math.random() * 10).toFixed(1);
              var num2 = (Math.random() * 10).toFixed(1);
              if (num1 < num2) {
                // 如果 num1 小于 num2，交换它们的值
                var temp = num1;
                num1 = num2;
                num2 = temp;
              }
              newTd[j].innerHTML =
                num1 +
                " - " +
                num2 +
                " = " +
                "<input type='text' value='' maxLength='5'>";
              var res = num1 - num2;
              break;
            case "15": // 小数乘法
              var num1 = (Math.random() * 10).toFixed(1);
              var num2 = (Math.random() * 10).toFixed(1);
              newTd[j].innerHTML =
                num1 +
                " x " +
                num2 +
                " = " +
                "<input type='text' value='' maxLength='5'>";
              var res = eval(newTd[j].innerText.replace("x", "*").slice(0, -3));
              break;
            case "16": // 小数除法
              var num1 = Math.floor(Math.random() * 10) + 1; // 生成一个 1 到 10 的整数
              var num2 = (Math.random() * 9 + 1).toFixed(1); // 生成一个 1 到 10 的一位小数
              var result = (num1 / num2).toFixed(1); // 将 num1 除以 num2，结果保留一位小数
              result = Math.round(result * 10); // 将结果乘以 10 并四舍五入，得到整数或一位小数
              newTd[j].innerHTML =
                (num1 * num2).toFixed(1) +
                " ÷ " +
                num1 +
                " = " +
                "<input type='text' value='' maxLength='5'>";
              var res = (num1 * num2).toFixed(1) / num1;
              break;
            case "17": // 小数的加减混合运算
              var randomDecimal1 = Math.random().toFixed(2);
              var randomDecimal2 = Math.random().toFixed(2);
              var randomDecimal3 = Math.random().toFixed(2);
              var randomDecimal4 = Math.random().toFixed(2);
              var operator1 = Math.random() < 0.5 ? "+" : "-";
              var operator2 = Math.random() < 0.5 ? "+" : "-";
              var result = eval(
                randomDecimal1 +
                  operator1 +
                  randomDecimal2 +
                  operator2 +
                  randomDecimal3
              );
              var question =
                randomDecimal1 +
                operator1 +
                randomDecimal2 +
                operator2 +
                randomDecimal3 +
                " = ";
              newTd[j].innerHTML =
                question + '<input type="text" value="" maxLength="5" />';
              var res = eval(newTd[j].innerText.slice(0, -1));
              break;
            case "99": //除数是两位数的除法
              var dividend = Math.floor(Math.random() * 10) + 1; // 被除数
              var divisor = Math.floor(Math.random() * 50) + 10; // 除数
              var quotient = (dividend * divisor) / divisor; // 商

              newTd[j].innerHTML = `${
                dividend * divisor
              } &divide; ${divisor} = <input type='text' value='${quotient}' maxLength='2'>`;
              var res = (dividend * divisor) / divisor;
              break;
            case "18": // 分数乘法
              var numerator1 = Math.floor(Math.random() * 10) + 1; // 分数1的分子
              var denominator1 = Math.floor(Math.random() * 10) + 2; // 分数1的分母
              var numerator2 = Math.floor(Math.random() * 10) + 1; // 分数2的分子
              var denominator2 = Math.floor(Math.random() * 10) + 2; // 分数2的分母
              newTd[j].innerHTML = `
              <div class="fraction"><span>${numerator1}</span><span class="top">${denominator1}</span></div>
              <div class="fraction"> &times; </div>
              <div class="fraction"><span>${numerator2}</span><span class="top">${denominator2}</span></div>
              <div class="fraction"> = </div>
              <input type='text' value='' maxLength='5'>`;
              var res =
                numerator1 * numerator2 + "/" + denominator1 * denominator2;
              break;
            case "19": // 分数除法
              var numerator1 = Math.floor(Math.random() * 10) + 1; // 分数1的分子
              var denominator1 = Math.floor(Math.random() * 10) + 2; // 分数1的分母
              var numerator2 = Math.floor(Math.random() * 10) + 1; // 分数2的分子
              var denominator2 = Math.floor(Math.random() * 10) + 2; // 分数2的分母
              newTd[j].innerHTML = `
            <div class="fraction"><span>${numerator1}</span><span class="top">${denominator1}</span></div>
            <div class="fraction"> &divide; </div>
            <div class="fraction"><span>${numerator2}</span><span class="top">${denominator2}</span></div>
            <div class="fraction"> = </div>
            <input type='text' value='' maxLength='5'>`;
              var res =
                numerator1 * denominator2 + "/" + denominator1 * numerator2;
              break;
            case "20": //分数加法
              var numerator1 = Math.floor(Math.random() * 10) + 1; //分数1的分子
              var denominator1 = Math.floor(Math.random() * 10) + 2; //分数1的分母
              var numerator2 = Math.floor(Math.random() * 10) + 1; //分数2的分子
              var denominator2 = Math.floor(Math.random() * 10) + 2; //分数2的分母
              var commonDenominator = denominator1 * denominator2; //通分后的分母
              var newNumerator1 = numerator1 * denominator2; //通分后的分数1的分子
              var newNumerator2 = numerator2 * denominator1; //通分后的分数2的分子
              var resultNumerator = newNumerator1 + newNumerator2; //分数加法的分子
              var resultDenominator = commonDenominator; //分数加法的分母
              newTd[
                j
              ].innerHTML = `<div class="fraction"><span>${numerator1}</span><span class="top">${denominator1}</span></div>
                <div class="fraction"> + </div>
                <div class="fraction"><span>${numerator2}</span><span class="top">${denominator2}</span></div>
                <div class="fraction"> = </div>
                <input type='text' value='${resultNumerator}/${resultDenominator}' maxLength='5'>`;
              var res = eval(resultNumerator / resultDenominator);
              break;
            case "21": //分数减法
              var numerator1 = Math.floor(Math.random() * 10) + 1; //分数1的分子
              var denominator1 = Math.floor(Math.random() * 10) + 2; //分数1的分母
              var numerator2 = Math.floor(Math.random() * 10) + 1; //分数2的分子
              var denominator2 = Math.floor(Math.random() * 10) + 2; //分数2的分母
              var commonDenominator = denominator1 * denominator2; //通分后的分母
              var newNumerator1 = numerator1 * denominator2; //通分后的分数1的分子
              var newNumerator2 = numerator2 * denominator1; //通分后的分数2的分子
              var resultNumerator = newNumerator1 - newNumerator2; //分数减法的分子
              var resultDenominator = commonDenominator; //分数减法的分母
              newTd[
                j
              ].innerHTML = `<div class="fraction"><span>${numerator1}</span><span class="top">${denominator1}</span></div>
                <div class="fraction"> - </div>
                <div class="fraction"><span>${numerator2}</span><span class="top">${denominator2}</span></div>
                <div class="fraction"> = </div>
                <input type='text' value='${resultNumerator}/${resultDenominator}' maxLength='5'>`;
              var res = eval(resultNumerator / resultDenominator);
              break;
          }
          newTr[i].appendChild(newTd[j]);
          this.counts[i]=res
        }
        document.getElementById("timu").appendChild(newTr[i]);
      }
      console.log(this.counts,999999999)
      this.$emit("theResult",this.counts);
    },
  },
};
</script>

<style lang="less">
.fraction {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.fraction span {
  display: block;
  border-top: 1px solid;
  text-align: center;
  line-height: 20px;
}

.fraction span:nth-child(1) {
  display: block;
  border-top: 0;
  text-align: center;
  line-height: 20px;
}

#main {
  font-family: Arial, sans-serif;
  font-size: 1rem;
}

#timu {
  margin-top: 1.5vh;
}

.tdStyle {
  border: 1px solid black;
  width: 100vw;
  height: 8.5vh;
  line-height: 8.5vh;
  text-align: center;
  font-size: 1rem;
  letter-spacing: 2px;
  background-color: #e1ebe8;
  border-color: rgb(59, 59, 59);
  input {
    width: 15vw;
    height: 3vh;
    margin-left: 1vw;
    font-size: 1rem;
    color: aliceblue;
    border-color: white;
    background-color: #d9b2f3;
    vertical-align: middle;
    /* 添加垂直对齐属性 */
  }
}

/* Optional: Add hover effects */
.tdStyle:hover {
  background-color: #d9b2f3;
}

.tdStyle input:hover {
  background-color: #c78be4;
}
</style>